<template>
  <div class="app-container">
    <el-card class="ptm10">
      <div style="width: 95% ;padding: 20px">
        <el-row :gutter="24">
<!--          <el-col :span="23">
            <el-select v-model="queryParams.dataSource" filterable
                       placeholder="请选择数据源数据源" clearable size="small" style="width: 28vh">
              <el-option label="主数据" value="master"/>
              <el-option label="ERP" value="slave"/>
            </el-select>
          </el-col>-->
        </el-row>
        <el-row :gutter="24">
          <el-col :span="23">
            <el-input
              style="font-size: 16px"
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 20}"
              v-model="queryParams.sql">
            </el-input>
          </el-col>
          <el-col :span="1">
            <el-row style="margin-top: 10px">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">执 行</el-button>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-button type="warning" icon="el-icon-search" size="mini" @click="clearSql">清 除</el-button>
            </el-row>
<!--            <el-row style="margin-top: 20px">
              <el-button type="success" icon="el-icon-download" size="mini" @click="handleExport">导 出</el-button>
            </el-row>-->
          </el-col>
        </el-row>

        <div>
        </div>
      </div>
    </el-card>

    <el-card class="p20">
      <el-table v-loading="loading"
                :data="data"
                :stripe="true"
                :fit="true"
                border highlight-current-row>
        <el-table-column label="序号" align="center" min-width="70" prop="PAGEHELPER_ROW_ID"/>
        <el-table-column v-for="rowName in rows" :label="rowName" align="center" min-width="150" :prop="rowName"
                         show-overflow-tooltip/>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :pageSizes="[10,20,50,100,200,500]"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script>

import { queryData } from '@/api/tool/gen.js'

export default {
  name: "/sqlQuery",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataSource: 'master',
        sql: null
      },
      data: [],
      total: 0,
      rows: [
        '1', '2', '3', '4', '5', '6', '7', '8', '9'
      ],
    }
  },
  methods: {
    executeQueryData() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.handleQuery();
    },
    handleQuery() {
      this.loading = true
      let sql = this.queryParams.sql
      let params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        dataSource: this.queryParams.dataSource,
        sql: encodeURIComponent(sql)
      }
      // console.log(encodeURIComponent(sql))
      // console.log(btoa(sql))
      // console.log(btoa(encodeURIComponent(sql)))

      queryData(params).then(response => {
        console.log(response)
        this.rows = this.parseTheTitle(response.rows);
        this.total = response.total
        this.data = response.rows
      }).catch(() => {
        this.data = []
        this.total = 0
        this.rows = [ '1','2','3','4','5','6','7','8','9']
      }).finally(() => {
        this.loading = false
      })
    },

    parseTheTitle(data) {
      let rows = []
      let count = 0
      let objectIndex = 0
      for (let i = 0; i < data.length; i++) {
        let j = Object.getOwnPropertyNames(data[i]).length
        if (count < j) {
          count = j
          objectIndex = i
        }
      }
      for (const key of Object.keys(data[objectIndex])) {
        if (key !== 'PAGEHELPER_ROW_ID') {
          rows.push(key)
        }
      }
      return rows;
    },


    clearSql() {
      this.queryParams.sql = null
    },

    /* handleExport(){
      // this.loading = true
      let sql = this.queryParams.sql
      let params = {
        sql: encodeURIComponent(sql),
        dataSource: this.queryParams.dataSource
      }
      this.exportExcel("system/view/check/exportData", params, "导出数据.xlsx")
    }, */
    /* exportExcel(path,data,fileName) {
      Message({
        showClose: true,
        message: '正在导出Excel，请耐心等待'
      })
       request({
        url: path ,
        method: 'post',
        data:data,
        responseType:"blob",
      }).then(response=>{
         const blob = new Blob([response]);
         let downloadElement = document.createElement("a");
         let href = window.URL.createObjectURL(blob);
         downloadElement.href = href;
         downloadElement.download = decodeURIComponent(fileName||'文件.xls');
         document.body.appendChild(downloadElement);
         downloadElement.click();
         document.body.removeChild(downloadElement);
         window.URL.revokeObjectURL(href);
         Message.close()
       })
    }, */
  }
}
</script>

<style scoped>

</style>
